<template>
    <el-carousel trigger="click" :interval="5000" arrow="never" :autoplay="false" :loop="false"
                 indicator-position="outside" @change="carouselChange" ref="carouselMenus">
		 
        <el-carousel-item>
            <div class="demo-basic--circle">
                <div class="block"  @click="goto('index')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                        <el-tooltip class="item" effect="dark" content="放置经常操作的功能" placement="top">
      <img src="./statics/images/shouye.png"
           style="object-fit: cover;">
    </el-tooltip>
                                        </span>
                    <span class="title">个人首页</span>
                </div>
                <div class="block" @click="goto('oa')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                        <el-tooltip class="item" effect="dark" content="办公申请与审批" placement="top">
                                        <img src="./statics/images/oa.png"
                                             style="object-fit: cover;">
                                        </el-tooltip>
                                    </span>
                    <span class="title" style="color:red">办公管理</span>
                </div>

            </div>

            <div class="demo-basic--circle">
                <div class="block" @click="goto('files')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                        <el-tooltip class="item" effect="dark" content="公司员工之间文件夹共享" placement="top">
                                        <img src="./statics/images/file.png"
                                             style="object-fit: cover;">
                                        </el-tooltip>
                                    </span>
                    <span class="title" style="color:red">文件收藏</span>
                </div>
                <div class="block" @click="goto('email')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                        <el-tooltip class="item" effect="dark" content="邮箱管理" placement="top">
                                        <img src="./statics/images/youjian.png"
                                             style="object-fit: cover;">
                                        </el-tooltip>
                                    </span>
                    <span class="title" style="color:red">邮件管理</span>
                </div>


            </div>

            <div class="demo-basic--circle">

                <div class="block" @click="goto('pm')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                        <el-tooltip class="item" effect="dark" content="人事角色的功能管理模块" placement="top">
                                        <img src="./statics/images/renshi.png"
                                             style="object-fit: cover;">
                                        </el-tooltip>
                                    </span>
                    <span class="title" style="color:red">人事行政</span>
                </div>

                <div class="block"  @click="goto('purchase')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                        <el-tooltip class="item" effect="dark" content="采购角色的功能管理模块，供应商管理，采购管理，工序外发" placement="top">
                                        <img src="./statics/images/caigou.png"
                                             style="object-fit: cover;">
                                        </el-tooltip></span>
                    <span class="title" style="color:blue">采购管理</span>
                </div>
            </div>

        </el-carousel-item>

        <el-carousel-item>
<!--            <div class="demo-basic&#45;&#45;circle" style="height: 12px;"></div>-->

            <div class="demo-basic--circle">
                <div class="block" @click="goto('xiaoshou')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                         <el-tooltip class="item" effect="dark" content="销售角色的功能管理模块，主要客户跟进，报价，下单，订单跟踪" placement="top">
                                        <img src="./statics/images/xiaoshou.png"
                                             style="object-fit: cover;">
                                        </el-tooltip></span>
                    <span class="title" style="color:red">销售管理</span>
                </div>
                <div class="block"  @click="goto('kefu')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                       <el-tooltip class="item" effect="dark" content="客服角色的功能管理模块，查看和跟踪所有客户的订单" placement="top">
                                        <img src="./statics/images/kefu.png"
                                             style="object-fit: cover;">
                                        </el-tooltip></span>
                    <span class="title" style="color:red">客服管理</span>
                </div>


            </div>

            <div class="demo-basic--circle">
                <div class="block">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                        <el-tooltip class="item" effect="dark" content="网址收藏的管理" placement="top">
                                        <img src="./statics/images/xiaoshoupingtai.png"
                                             style="object-fit: cover;">
                                        </el-tooltip>
                                    </span>
                    <span class="title" style="color:blue">营销平台</span>
                </div>
                <div class="block" @click="goto('store')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                         <el-tooltip class="item" effect="dark" content="仓库角色的功能管理模块，仓库管理，金和石头的调度，例如：员工工单领料" placement="top">
                                        <img src="./statics/images/cangku.png"
                                             style="object-fit: cover;">
                                        </el-tooltip></span>
                    <span class="title" style="color:blue">仓库管理</span>
                </div>

            </div>

            <div class="demo-basic--circle">
                <div class="block"  @click="goto('finance')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                        <el-tooltip class="item" effect="dark" content="财务角色的功能管理模块，财务管理，成本管理，仓库盘点" placement="top">
                                        <img src="./statics/images/caiwu.png"
                                             style="object-fit: cover;">
                                        </el-tooltip></span>
                    <span class="title" style="color:blue">财务管理</span>
                </div>
                <div class="block"  @click="goto('production')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                      <el-tooltip class="item" effect="dark" content="收发，设计，起版，品检的角色的功能管理模块，生产管理，工单操作，工序之间的品检 还有 生产进度，成本和效率查看" placement="top">
                                        <img src="./statics/images/shengchan.png"
                                             style="object-fit: cover;">
                                        </el-tooltip></span>
                    <span class="title" style="color:blue">生产管理</span>
                </div>
            </div>
        </el-carousel-item>

        <el-carousel-item>
<!--            <div class="demo-basic&#45;&#45;circle" style="height: 12px;"></div>-->

            <div class="demo-basic--circle">
                <div class="block"  @click="goto('reports')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                        <el-tooltip class="item" effect="dark" content="每个角色的报表查询管理" placement="top">
                                        <img src="./statics/images/baobiao.png"
                                             style="object-fit: cover;">
                                        </el-tooltip></span>
                    <span class="title">报表分析</span>
                </div>
                <div class="block">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                        <img src="./statics/images/yingxiao.png"
                                             style="object-fit: cover;"></span>
                    <span class="title">营销助手</span>
                </div>

            </div>

            <div class="demo-basic--circle">

                <div class="block">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                        <img src="./statics/images/gongju.png"
                                             style="object-fit: cover;"></span>
                    <span class="title">实用工具</span>
                </div>

                <div class="block"  @click="goto('system')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                       <el-tooltip class="item" effect="dark" content="系统的基本设置管理" placement="top">
                                        <img src="./statics/images/system.png"
                                             style="object-fit: cover;">
                                        </el-tooltip></span>
                    <span class="title" style="color:red">系统管理</span>
                </div>
            </div>

            <div class="demo-basic--circle">

                <div class="block">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                        <img src="./statics/images/yun.png"
                                             style="object-fit: cover;"></span>
                    <span class="title">宝盟平台</span>
                </div>

                <div class="block">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                       <el-tooltip class="item" effect="dark" content="系统的基本设置管理" placement="top">
                                        <img src="./statics/images/gongyinglian.png"
                                             style="object-fit: cover;">
                                        </el-tooltip></span>
                    <span class="title">采购助手</span>
                </div>
            </div>


        </el-carousel-item>

<!--  <el-carousel-item>


            <div class="demo-basic--circle">
                <div class="block"  @click="goto('dangan')">
                                    <span class="el-avatar el-avatar--circle"
                                          style="height: 60px; width: 60px; line-height: 60px;   margin: 0 auto;">
                                        <el-tooltip class="item" effect="dark" content="档案管理" placement="top">
                                        <img src="./statics/images/baobiao.png"
                                             style="object-fit: cover;">
                                        </el-tooltip></span>
                    <span class="title">基础档案</span>
                </div>
            </div>




        </el-carousel-item> -->


    </el-carousel>
</template>

<style>
/*.item{*/
/*    margin: 4px;*/
/*}*/
</style>

<script>
  module.exports = {
    methods:{
      goto (link) {
        console.log(link)
		localStorage.carouselMenusAuto = localStorage.carouselMenusItem;//切换carousel时可能不会点击链接，有点链接才保存
        window.location.href = './' + link + '.html';
      },
	  //点击切换时获取索引，方便下次自动定位
	  carouselChange:function(key1,key2) {
	      //console.log(key1+',,,'+key2);
		  localStorage.carouselMenusItem=key1;
		  //console.log(localStorage.carouselMenusItem);
      },
	  setActiveItem:function(item=0){
			//alert(localStorage.carouselMenusAuto)
	      if(!item && localStorage.carouselMenusAuto ){
			    //this.$refs.carouselMenus.setActiveItem(localStorage.carouselMenusAuto);//执行不成功
				//alert(localStorage.carouselMenusAuto)
			}
	  }
    },
	mounted:function(){
	    this.setActiveItem()
	},
    data(){
        return{
		
        }
    }
  }
</script>
